<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        跟踪模板内容
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../css/main.css" media="all">
    <link rel="stylesheet" href="../../../lib/layui/css/layui_2.5.7.css">
    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>
</head>
<style>
 .layui-tab-title > li:first-child{
     background-color: #fff;
 }

 /*.layui-tab-content > div:first-child{*/
 /*    display: block!important;*/
 /*}*/

</style>

<body>
<div class="x-body" id="app">
    <form class="layui-form layui-form-pane" id="add" lay-filter="updateInfo">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
<!--            <ul class="layui-tab-title" v-for='(item,index) in tabList'>-->
                <li v-for='(item,index) in tabList'>{{item.name}}</li>
            </ul>
            <div class="layui-tab-content" style="height: 150px;">
                <div class="layui-tab-item" v-for='(item1,index) in tabList'>{{item1.name}}
                    <li v-for='(item2,index) in item1.childList'>{{item2.name}}</li>
                </div>
<!--                <div class="layui-tab-item">2</div>-->
<!--                <div class="layui-tab-item">3</div>-->
<!--                <div class="layui-tab-item">4</div>-->
<!--                <div class="layui-tab-item">5</div>-->
<!--                <div class="layui-tab-item">6</div>-->
            </div>
        </div>

        <!--        <div style="text-align: center" class="layui-form-item">-->
<!--            <button class="layui-btn" type="button" lay-filter="sub" lay-submit="sub">-->
<!--                确定-->
<!--            </button>-->
<!--        </div>-->

    </form>
</div>
<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../js/pub.js"></script>
<script src="../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../js/vue.min.js" charset="utf-8"></script>

<script>

    var templateId = getQueryVariable("templateId");

    layui.use(['laydate', 'form', 'layer'],
        function () {
            var laydate = layui.laydate;
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;

            let request = {
                url: 'xa/template/findTemplateById',
                data: {
                    userId: $userId,
                    id:templateId
                },
            };
            sendRequest(request, (data) => {
                if (data.code === 0) {
                    form.val('updateInfo', {

                        "name": data.data.name,
                        "memo":data.data.memo
                    });
                } else {
                    layer.alert(data.msg, {
                        icon: 2
                    })
                }
            });

            //监听审批提交
            // form.on('submit(sub)',
            //     function (data) {
            //         let form = data.field;
            //         form.userId = $userId;
            //         form.id = templateId;
            //         form.level = 1;

                    // let request = {
                    //     url: 'xa/template/addAndUpdateTemplate',
                    //     data: form,
                    //     method: "post",
                    // };
                    // sendRequest(request, (data) => {
                    //
                    //         if (data.code === 0) {
                    //         layer.alert("操作成功", {
                    //                 icon: 6
                    //             },
                    //             function () {
                    //                 let index = parent.layer.getFrameIndex(window.name);
                    //                 parent.layer.close(index);
                    //                 parent.location.reload();
                    //             });
                    //     } else {
                    //         layer.alert(data.msg, {
                    //             icon: 5
                    //         })
                    //     }
                    //
                    // });
                //     return false;
                // });


        });


    const vm = new Vue({
        el: "#app",
        data: {
            tabList:[],
            billing: {
                id: null,
                name: null,
                taxpayerIdentificationNumber: null,
                addressAndTelephoneNumber: null,
                bankAndAccountNumber: null,
                contactInformation: null,
                billType: null,
                faceValue: null,
                billingDate: null,
                taxPoint: null,
                faceTax: null,
                associatedCredentials: null,
                associatedCredentialsId: null,
                remark: null,
                billAttachment: '',
                pictureOfReceipt: '',
                type: null,
                nature: null
            }
        },
        created() {

            this.getTabList();
        },
        mounted() {
            var that = this;
            layui.use(['element', 'table', 'form', 'upload','layer'], function() {

                var $ = layui.jquery
                var table = layui.table;
                var form = layui.form;
                var upload = layui.upload;
                var element = layui.element();//Tab的切换功能，切换事件监听等，需要依赖element模块
                var layer = layui.layer;

                okLoading.close($);


                //触发事件
                var active = {
                    tabAdd: function(){
                        //新增一个Tab项
                        element.tabAdd('demo', {
                            title: '新选项'+ (Math.random()*1000|0) //用于演示
                            ,content: '内容'+ (Math.random()*1000|0)
                            ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                        })
                    }
                    ,tabDelete: function(othis){
                        //删除指定Tab项
                        element.tabDelete('demo', '44'); //删除：“商品管理”


                        othis.addClass('layui-btn-disabled');
                    }
                };

                $('.site-demo-active').on('click', function(){
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });

                //Hash地址的定位
                // var layid = location.hash.replace(/^#test=/, '');
                // element.tabChange('test', layid);

                // element.on('tab(test)', function(elem){
                //     location.hash = 'test='+ $(this).attr('lay-id');
                // });
            });
        },
        computed: {
            // bindSrcBillAttachment() {
            //     return vm.billing.billAttachment.startsWith('upload') ? $baseUrl +
            //         'other/viewUploadFile?id=' + vm.billing.billAttachment : '../../images/upload.png';
            // },
            // bindSrcPictureOfReceipt() {
            //     return vm.billing.pictureOfReceipt.startsWith('upload') ? $baseUrl +
            //         'other/viewUploadFile?id=' + vm.billing.pictureOfReceipt : '../../images/upload.png';
            // }
        },
        methods: {
            // uploadBillAttachment() {
            //     this.$refs.billAttachment.click()
            // },
            // uploadPictureOfReceipt() {
            //     this.$refs.pictureOfReceipt.click()
            // },
            getTabList: function() {
                var that = this;
                let request = {
                    url: 'xa/template/findTemplateInfo',
                    data: {
                        userId: $userId,
                        id:templateId
                    },
                    method: "GET"
                }
                sendRequest(request, (res) => {
                    console.log(res)
                    that.tabList = res.data.childList;
                })
            },
        },


    });

</script>

</body>

</html>
